<template>
	<div>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				基础信息
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">登录账号：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[66px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">密码：</span>
						<el-input type="password" class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">供应商公司名称：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[66px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">地区：</span>
						<el-cascader class="flex-1 ml-[10px]" v-model="value" :options="options"
							@change="handleChange" />
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">地区：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[66px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">公司简介：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">主营产品分类：</span>
						<el-select class="flex-1 ml-[10px]" multiple placeholder="下拉选择产品分类，二级分类，多选" >
							<el-option v-for="item in options2" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[66px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">报价系数：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="16">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] text-right">可以生产的材质种类：</span>
						<el-radio-group v-model="radio" class="flex-1 ml-[10px]" style="margin-top: -6px;">
							<el-radio label="1" size="large">Mn12Cr2</el-radio>
							<el-radio label="2" size="large">Mn18Cr2</el-radio>
							<el-radio label="3" size="large">高碳高耐磨合金钢加陶瓷(合金12#)</el-radio>
							<el-radio label="4" size="large">高碳高耐磨cr26加陶瓷</el-radio>
							<el-radio label="5" size="large">高碳高耐磨cr26加陶瓷</el-radio>
							<el-radio label="6" size="large">高碳高耐磨cr26加陶瓷</el-radio>
						</el-radio-group>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] mr-[10px] text-right">营业执照：</span>
						<el-upload class="avatar-uploader"
							action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
							:show-file-list="false" :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload" :limit="1">
							<img v-if="imageUrl" :src="imageUrl" class="avatar" />
							<el-icon v-else class="avatar-uploader-icon">
								<Plus />
							</el-icon>
						</el-upload>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[66px]">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] mr-[10px] text-right">Logo：</span>
						<el-upload class="avatar-uploader"
							action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
							:show-file-list="false" :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload" :limit="5">
							<img v-if="imageUrl" :src="imageUrl" class="avatar" />
							<el-icon v-else class="avatar-uploader-icon">
								<Plus />
							</el-icon>
						</el-upload>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				联系人信息
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">销售联系人：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[66px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">销售联系电话：</span>
						<el-input type="number" class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">销售邮箱：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[66px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">老板联系人：</span>
						<el-input type="number" class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">老板联系电话：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[66px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">老版邮箱：</span>
						<el-input type="number" class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">财务联系人：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[66px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">财务联系电话：</span>
						<el-input type="number" class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">财务邮箱：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				收付款信息
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">开户银行：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[66px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">收款账号：</span>
						<el-input type="number" class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				开票信息
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">公司名称：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[66px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">纳税识别号：</span>
						<el-input type="number" class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">备注：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				运费条款
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">是否含运费：</span>
						<el-radio-group v-model="radio" class="flex-1 ml-[10px]" >
							<el-radio label="1" size="large">是</el-radio>
							<el-radio label="2" size="large">否</el-radio>
						</el-radio-group>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">是否含进仓费：</span>
						<el-radio-group v-model="radio" class="flex-1 ml-[10px]" >
							<el-radio label="1" size="large">是</el-radio>
							<el-radio label="2" size="large">否</el-radio>
						</el-radio-group>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">产品参数支持：</span>
						<el-radio-group v-model="radio" class="flex-1 ml-[10px]" >
							<el-radio label="1" size="large">需要审核</el-radio>
							<el-radio label="2" size="large">无需审核</el-radio>
						</el-radio-group>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]" >
				<span>取消</span>
			</el-button>
			<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">
				<span>保存</span>
			</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	import type { UploadProps } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	const value = ref([])
	const options = [{
		value: 'guide',
		label: 'Guide',
		children: [{
			value: 'disciplines',
			label: 'Disciplines',
			children: [{
				value: 'consistency',
				label: 'Consistency',
			},
			{
				value: 'feedback',
				label: 'Feedback',
			},
			{
				value: 'efficiency',
				label: 'Efficiency',
			},
			{
				value: 'controllability',
				label: 'Controllability',
			},
			],
		}],
	}]
	const handleChange = (value) => {
		console.log(value)
	}
	const options2 = ref<Array<any>>([
		{
			value: '1',
			label: 'Metos/Sandvik/Extec/Symons'
		}, 
	])
	const radio = ref('1')
	const imageUrl = ref('')//图片上传
	const handleAvatarSuccess : UploadProps['onSuccess'] = (
		response,
		uploadFile
	) => {
		imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	}
	const beforeAvatarUpload : UploadProps['beforeUpload'] = (rawFile) => {
	
		return true
	}
</script>

<style scoped lang="scss">
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		text-align: center;
		background: #F7F7F7;
	}
</style>